<template>
    <div class="pie_continer">
        <div class="flex">
            <el-radio-group v-model="pieType" size="large">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>
            <el-select v-model="pieDay" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in pieDays" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div id="pie" style="width: 100%;height:400px;"></div>
    </div>
    <div class="map-container">
        <div id="map" style="width: 100%; height: 600px"></div>
    </div>
</template>

<script setup lang="ts">
/*
  在浏览器里面实现一些图形化的功能，一般推荐使用 echarts
  首先声明： echarts 不是和vue是强相关的，任何的框架都可以使用(原生js、react)

  官方网站：https://echarts.apache.org/zh/index.html

  使用的步骤：
    1. 安装：  yarn add echarts
    2. 需要引入
    3. 准备好一个视图容器 , 注意： 该容器一定要有宽高不然看不见东西
    4. 调用 echarts.init 方法，初始化图形组件
    5. 通过setOptions 方法，把图形需要的数据传入 图形组件(echarts实例)
    6. 去配置项查相应的 option 进行配置
*/
// 2. 引入
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';
import { stat } from "@/api"
// 直接把地址的json数据导入
import china from "@/assets/json/china.json";

type EChartsOption = echarts.EChartsOption;

// pieType 要得到的就是 sale_ 或者 _money
const pieType = ref<"sale_" | "_money">("sale_");
const pieDay = ref("yesterday");
const pieDays = [
    {
        label: "昨天",
        value: "yesterday",
    },
    {
        label: "今天",
        value: "today",
    },
    {
        label: "前3天",
        value: "2",
    },
    {
        label: "前7天",
        value: "seven_days",
    },
    {
        label: "前14天",
        value: "fourteen_days",
    },
];

let pieData: IPieItem[] = [];
var pieChart: echarts.ECharts;
var pieOption: EChartsOption;

onMounted(() => {
    stat.getIndexStatApi().then(res => {
        pieData = res.data.salePie;
        // 这个是饼图数据
        // 图表的数据要求的是 {name,value}
        // 对请求回来的数据进行转换
        const data = res.data.salePie.map((item) => ({
            name: item.name,
            value: item.sale_yesterday
        }));

        // 数据从series[0].data传入
        // series 是 echarts.SeriesOption | echarts.SeriesOption[] | undefined 类型
        // 不能直接   [索引] 访问
        // 进行收缩类型，然后把数据传入
        (pieOption.series as echarts.SeriesOption[])[0].data = data;

        // 这个是数据渲染
        pieOption && pieChart.setOption(pieOption);
        // 可以把地图数据传入里面
        initMap(res.data.saleMap);
    })

    var chartDom = document.getElementById('pie')!;
    pieChart = echarts.init(chartDom);
    pieOption = {
        // 鼠标移动到对应的数据上之后的提示
        tooltip: {
            trigger: 'item',
            backgroundColor: "rgba(50,50,50,.7)",
            textStyle: {
                color: "#fff",
            },
            formatter: "{b}: {c},({d}%)",
        },
        // 图例
        legend: {
            top: '5%',
            orient: "vertical",
            height: 100,
            left: 'right'
        },
        series: [
            {
                type: 'pie',
                left: "-30%",
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside'
                },
                // 高亮状态
                emphasis: {
                    label: {
                        show: true,
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    // 图表要求的数据格式： {name,value}
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };

})


// 当 pieDay 和 pieType 任何一个发生变化，都应该修改 饼图的数据
// 做法有很多种， radio 和 select 都有 change 事件，可以做 pieDay 和 pieType 变化时的处理
// change事件相对麻烦一些，建议使用 watch
watch([pieDay, pieType], () => {
    let key = "";
    if (pieType.value === "sale_") {
        key = pieType.value + pieDay.value;
    } else {
        key = pieDay.value + pieType.value;
    }
    // 根据key 取出数据，重新渲染
    const data = pieData.map((item) => ({
        name: item.name,
        // 根据动态生成的 key 取出对应的数据
        value: item[key], // 默认一开始显示的是的 昨天的销量
    }));
    (pieOption.series as echarts.SeriesOption[])[0].data = data;
    pieChart.setOption(pieOption);
});


// 地图的使用：
// 1. 需要一个json数据，让这些json数据告诉我们现在这个地图要展示哪些地区
// http://datav.aliyun.com/portal/school/atlas/area_selector  去这获取我们想要地图信息
function initMap(mapData: IMapItem[]) {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById("map")!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    echarts.registerMap("HK", china as any);

    // 转换mapData 为 {name,value} 的形式
    const data = mapData.map((item) => ({
        name: item.areaName,
        value: item.saleNum,
    }));

    myChart.setOption(
        (option = {
            title: {
                left: "center",
                text: "全国销量分布图",
                textStyle: {
                    color: "#333",
                    fontSize: 20,
                    fontWeight: "normal",
                },
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}<br/>销量：{c}",
                backgroundColor: 'rgba(70,70,70,.7)',
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: 1000000,
                realtime: true,
                calculable: true,
                inRange: {
                    color: ["#fff", "pink", "orange", 'red', 'gold'],
                },
            },
            series: [
                {
                    type: "map",
                    map: "HK",
                    label: {
                        show: false,
                    },
                    emphasis: {
                        label: {
                            show: false
                        },
                        itemStyle: {
                            areaColor: '#0a0'
                        }
                    },
                    data
                },
            ],
            // 一定要保证 后端返回的name 要和 json 里面的 name 要一致，如果不一致，需要自己在下面进行映射
            // nameMap: {
            //   "四川省": "四川",
            // },
        })
    );
    option && myChart.setOption(option);
}
</script>

<style lang="less" scoped>
.flex {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}
</style>